import u from './user.module.scss'
import Welcome from '../../components/Welcome';
import { Table, Space, Button } from 'antd';
import { getUserListAPI } from '../../apis/user';
import axios from 'axios';
import type { TableColumnsType } from 'antd';
import { useEffect, useState } from 'react';


interface DataListType {
    key?: React.Key,
    username?: string,
    userstatus?: string
}

function user() {

    /* --------------------------------- 课程状态表格 --------------------------------- */
    // 列名
    const columns: TableColumnsType<DataListType> = [
        {
            title: '用户名',
            key: 'username',
            dataIndex: 'username',
            render: (text: any, record: any, index: any) => {
                return <div className='table-course'>
                    <img src="../../assets/images/shoesdogLogo1.png" alt="" />
                    <div>{record.username}</div>
                </div>
            }
        },
        {
            title: '用户状态',
            key: 'userstatus',
            dataIndex: 'userstatus',

        },
        {
            title: '操作',
            key: 'action',
            dataIndex: 'action',
            render: (text: any, record: any, index: any) => (
                <Space size="middle">
                    <Button onClick={iceAction(record.key, record.userstatus)}>{record.userstatus === '正常' ? '冻结' : '解冻'}</Button>
                </Space>
            ),
        },
    ];
    //数据
    // dataList = [
    //     {
    //         key: '1',
    //         username: '总是被说画面没质感？只需2招教你解决',
    //         userstatus: '正常',
    //     },
    //     {
    //         key: '2',
    //         username: '11',
    //         userstatus: '正常',
    //     },
    //     {
    //         key: '3',
    //         username: 'John Brown',
    //         userstatus: '正常',
    //     },
    //     {
    //         key: '4',
    //         username: 'John Brown',
    //         userstatus: '正常',
    //     },
    //     {
    //         key: '5',
    //         username: 'John Brown',
    //         userstatus: '正常',
    //     },
    //     {
    //         key: '6',
    //         username: 'John Brown',
    //         userstatus: '正常',
    //     },

    // ];

    /* -------------------------------- 请求用户列表信息 -------------------------------- */
    const [dataList, setDataList] = useState<DataListType[]>([]) //用户列表
    const [dataCount, setDataCount] = useState<number>(0)        //用户数量

    const getUserList = async () => {
        let { data } = await axios({
            method: 'get',
            url: 'http://localhost:8080/api/admin/getUserList'
        })
        if (data.status == 200) {
            let result: DataListType[] = []
            setDataCount(data.data.length)
            data.data.forEach((item: any) => {
                result.push({
                    key: item.user_id + '',
                    username: item.user_name,
                    userstatus: item.user_type == '1' ? '正常' : '冻结'
                })
            })
            setDataList(result)
        }
    }
    useEffect(() => {
        getUserList()
    }, [])
    // getUserList()

    /* ---------------------------------- 点击冻结/解冻 ---------------------------------- */
    const iceAction = (user_id: string, user_status: string) => async () => {
        await axios({
            method: 'post',
            url: 'http://localhost:8080/api/admin/changeIce',
            data: {
                user_id,
                user_status
            }
        })
        getUserList()
        getUserCount()
    }

    /* --------------------------------- 查询用户数量 --------------------------------- */
    const [iceCount, setIceCount] = useState<number>(0)          // 冻结用户数量
    const [normalCount, setNormalCount] = useState<number>(0)    //正常用户数量
    const getUserCount = async () => {
        let { data } = await axios({
            method: 'get',
            url: 'http://localhost:8080/api/admin/getUserCount'
        })
        if (data.status == 200) {
            setIceCount(data.count.ice)
            setNormalCount(data.count.normal)
        }
    }
    useEffect(() => {
        getUserCount()
    })

    return (
        <div className={u.page}>
            <div className={u.container}>
                <div className={u.welcome}>
                    <Welcome></Welcome>
                </div>
                <div className={u.top}>
                    <div className={u.topItem}>
                        <div className={u.topItemText}>
                            <div>用户数量</div>
                        </div>
                        <div className={u.topItemData}>
                            <div style={{ color: '#74dafc' }}>{dataCount}</div>
                        </div>
                    </div>
                    <div className={u.topItem}>
                        <div className={u.topItemText}>
                            <div>已冻结用户</div>
                        </div>
                        <div className={u.topItemData}>
                            <div style={{ color: '#fc9674' }}>{iceCount}</div>
                        </div>
                    </div>
                    <div className={u.topItem}>
                        <div className={u.topItemText}>
                            <div>正常用户</div>
                        </div>
                        <div className={u.topItemData}>
                            <div style={{ color: '#00d962' }}>{normalCount}</div>
                        </div>
                    </div>
                </div>
                <div className={u.content}>
                    <div className={u.contentTitle}>用户列表</div>
                    <div className={u.contentTable}>
                        <Table size='middle' columns={columns} dataSource={dataList}></Table>

                    </div>
                </div>
            </div>
        </div>
    );
}

export default user;